fixes: css improvements and UI redesign for manga info page

1 files changed, 39 insertions, 26 deletions

diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 686374a..6108766 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -1,30 +1,22 @@
-.MangaInfoContainer {
-	max-width: 90%;
-	margin: 0px auto;
-}
-
 .MangaHero {
 	display: flex;
 	flex-direction: column;
-}
-
-.HeroImage {
-	width: 100%;
-	height: auto;
-	max-height: 550px;
-	border-radius: 10px;
+	justify-content: center;
 }
 
 .TitleContainer {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-top: 10px;
+	padding: 5px;
+	backdrop-filter: blur(5px);
+
 }
 
 .TitleContainer p {
-	font-family: "Lato";
-	font-size: 32px;
+	font-family: "Quicksand";
+	font-size: 40px;
+	font-weight: 900;
 }
 
 .TitleContainer img {
@@ -44,6 +36,14 @@
 }
 
 .MangaRatings {
+	display: flex;
+	justify-content: center;
+	margin-top: -10px;
+}
+
+.MangaRatings span {
+	margin-right: 2px;
+	margin-left: 2px;
 	color: var(--light-green);
 }
 
@@ -65,14 +65,10 @@
 }
 
 .Character::-webkit-scrollbar-thumb {
-	background-color: #949494;
+	background-color: #B799FF;
 	border-radius: 5px;
 }
 
-.Character::-webkit-scrollbar-track {
-	background-color: rgb(87, 87, 87);
-	border-radius: 5px;
-}
 
 .CharacterEntry {
 	margin: 5px;
@@ -101,17 +97,20 @@
 }
 
 .ChapterContainer::-webkit-scrollbar-thumb {
-	background-color: #949494;
+	/* background-color: #949494; */
+	background-color: #B799FF;
 	border-radius: 5px;
 }
 
-.ChapterContainer::-webkit-scrollbar-track {
+/* .ChapterContainer::-webkit-scrollbar-track {
 	background-color: rgb(66, 66, 66);
 	border-radius: 5px;
-}
+} */
+
 
 .ChapterContainer button {
-	width: 100px;
+	width: 130px;
+	height: auto;
 	padding: 10px;
 	margin: 5px;
 	border-radius: 5px;
@@ -119,13 +118,18 @@
 	border: none;
 	outline: none;
 	font-family: "Lato";
-	background-color: #777777e3;
+	background-color: #f8f6e3dc;
 	cursor: pointer;
 	transition: transform 0.2s linear;
 }
 
+.ChapterContainer button p {
+	font-family: "Quicksand";
+	margin: 2px;
+}
+
 .ChapterContainer button:hover {
-	background-color: var(--neon-green);
+	background-color: #97E7E1;
 }
 
 .ChapterContainer button:focus {
@@ -144,4 +148,13 @@
 		font-size: 28px;
 	}
 
+	.ChapterContainer button {
+		width: 120px;
+
+	}
+
+	.ChapterContainer button p {
+		font-size: 14px;
+	}
+
 }
\ No newline at end of file